<template>
  <div class="wrapper">
    <div class="header">支付结果</div>
    <div class="icon">
      <div :class="[{succ : isSucc === true},{fail: isSucc === false}]"></div>
    </div>
    <div class="message">{{message}}</div>
    <component-button :content="title"
                      @submit="handleSubmit"></component-button>
    <component-button :content="back"
                      @submit="handleSubmit2" v-show="title === '重新支付'" class="back"></component-button>
  </div>
</template>
<script>
import ComponentButton from 'common/button'
import base from '@/api/base'
export default {
  data () {
    return {
      message: '',
      title: '',
      isSucc: true,
      order: 0,
      back: '返回首页'
    }
  },
  name: 'Result',
  components: {
    ComponentButton
  },
  methods: {
    getSUccStates () {
      const url = window.location.href
      let obj = this.splitUrl(url)
      const status = obj.status
      if (status === 'fail') {
        this.isSucc = false
        this.title = '重新支付'
        this.message = '支付失败'
      } else {
        this.isSucc = true
        this.title = '完成'
        this.message = '支付成功'
      }
      this.order = obj.order_no
    },
    handleSubmit () {
      const title = '完成'
      const order = this.order
      if (title === this.title) {
        this.$router.push({
          path: '/home'
        })
      } else {
        const url = `${base.pro}/wap/payment-${order}.html`
        window.location.href = url
      }
    },
    handleSubmit2 () {
      this.$router.push({
        path: '/home'
      })
    },
    splitUrl (url) {
      let obj = {}
      const list = url.split('?')
      const params = list[1].split('&')
      params.map((item, index) => {
        item.split('=')
        obj[item.split('=')[0]] = unescape(item.split('=')[1])
      })
      return obj
    }
  },
  created () {
    this.getSUccStates()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  width 100%
  height 100%

.header
  width 100%
  height 88px
  background $common_bgc
  box-shadow 0px 0px 0px 0px rgba(5, 5, 5, 0.12)
  margin-bottom 82px
  display flex
  justify-content center
  align-items center
  font-size $back_fz
  color $common_fz_color
  font-weight 500

.message
  width 100%
  text-align center
  line-height 50px
  font-size $back_fz
  color $common_fz_color

.icon
  width 100%
  display flex
  justify-content center
  align-items center
  height 160px

.succ
  width 160px
  height 160px
  bgckImg('~@/assets/images/succ.png', center, center)

.fail
  width 160px
  height 160px
  bgckImg('~@/assets/images/fail.png', center, center)
.back
  bottom 140px
</style>
